<template>
  <div id="myModal" class="modal"> 
        <div class="modal-content">
        <h2>请输入密钥继续查看后面的内容</h2>
        <div class="form-container">  
            <form action="/doLogin" method="get">  
                <input type="password" name="password" placeholder="请输入密钥" required>  
                <input type="submit" value="提交">  
            </form>  
        </div>
        <div class="modal-footer">
        <b>密钥获取途径：</b>  
        <div style="margin-top: 10px;">
        <div>
            组织：<a href="https://gitee.com/mldong666/mldong-doc-cli" target="_blank">点击跳转</a>  
        </div>
        <div> 
            邮箱：<a href="mailto:******" class="email-link">******</a>  
        </div>
            纷传：微信扫描下方二维码加入圈子  
        </div>
        <div> 
            <img  @click="handleClick" src="/logo.png" alt="纷传小程序二维码" class="qrcode-img"> 
        </div>
        <template v-if="checkUrl">
            <b>点亮小星星才可以获取临时密钥：</b> 
            <a :href="checkUrl">立即检测</a>
        </template>
        </div>  
        </div>
  </div>
</template>
 
<script>

export default {
  name: 'NotAuth',
  data() {
    return {
        checkUrl: ''
    }
  },
  mounted() {  
    
    let origin = "http://localhost:3000";
    if(typeof window !== 'undefined'){
        origin = window.location.protocol + "//" + window.location.host.replace(/\/$/, ''); 
    }
    const client_id = this.$page.GITEE_CLIENT_ID || '0063bdc3a3ddb0c0ab5bc84f8c930300cf786eee8fbaaac6a3bbd22e0e6092cd'
    const redirect_uri = this.$page.GITEE_REDIRECT_URI || `${origin}/giteeCallback`  
    this.checkUrl = `https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code&scope=user_info`
  },
  methods: {  
    handleClick(e) {  
       e.preventDefault()
    }  
  }
}
</script>
<style scoped>  
    .modal {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        height: 100%;  
        background-color: rgba(0, 0, 0, 0.5);  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        z-index: 99;  
    }  

    .modal-content {  
        background-color: #fff;  
        padding: 20px;  
        border-radius: 5px;  
        position: relative;  
        width: 500px;
    }  
    .form-container {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
    }  
    .form-container form {
        width: 100%;
    }
    .form-container input[type=password],  
    .form-container input[type=submit] {  
        width: 100%;  
        box-sizing: border-box; /* 确保padding和border包含在width内 */  
        padding: 10px;  
        margin-bottom: 10px;  
    }  
  
    .form-container input[type=password] {  
        border: 1px solid #ccc;  
        border-radius: 3px;  
    }  
  
    .form-container input[type=submit] {  
        background-color: #4CAF50;  
        color: white;  
        border: none;  
        border-radius: 3px;  
        cursor: pointer;  
    }  
  
    .form-container input[type=submit]:hover {  
        background-color: #45a049;  
    } 
    /* 弹窗底部描述样式 */  
    .modal-footer {  
        margin-top: 20px; /* 与弹窗内容之间的间距 */  
        padding-top: 10px;  
        border-top: 1px solid #eee; /* 可选，添加顶部边框 */  
        font-size: 14px; /* 字体大小 */  
        color: #666; /* 字体颜色 */  
    }  
    
    /* 链接样式 */  
    .modal-footer a {  
        color: #007bff; /* 链接颜色 */  
        text-decoration: none; /* 去除下划线 */  
        transition: color 0.3s ease; /* 链接颜色过渡效果 */  
    }  
    
    /* 链接鼠标悬停样式 */  
    .modal-footer a:hover {  
        color: #0056b3; /* 鼠标悬停时的链接颜色 */  
    }  
    
    /* 邮箱链接样式，可单独设置 */  
    .modal-footer a.email-link {  
        text-decoration: underline; /* 邮箱链接下划线 */  
    }  
</style> 